<!-- 我的积分 -->
<template>
	<view class="score">
		<view class="cardbg">
			<image :src="cardbg" mode="" class="pa"></image>
		</view>
		<!-- 个人信息 -->
		<view class="content pr">
			<view class="info">
				<view class="info_box">
					<image :src="user.pic_url" mode=""></image>
					<view class="text">
						<view class="name">{{user.nickname}}</view>
						<view class="phone">{{user.mobile}}</view>
					</view>
				</view>
			</view>
			<view class="score_content">
				<!-- 头部卡片 -->
				<view class="cardScore pa">
					<card :card_num="card_num" :show="true"></card>
				</view>
				<!-- 积分明细，积分规则 -->
				<view class="integral">
					<tabbar id="tabbar" :active="active" :showLabel="false" :tab="tab" @change_status="change_status">
					</tabbar>
					<!-- 积分明细 -->
					<view class="detailed" v-if="active == 0">
						<refresh :freshFlag="freshFlag" :loadMsg="loadMsg"></refresh>
						<view class="item" v-for="(item,index) in list" :key="index" @touchstart="touchStart($event)"
							@touchmove="touchMove($event)" @touchend="touchEnd($event)">
							<view class="item_top">
								<view class="x-f">
									<p v-if="item.action != '共享积分'">{{ item.action }}</p>
									<template v-if="item.type === 0 && item.action == '共享积分'">
										<image class="user" :src="item.pic_url || '/static/image/999.png'"></image>
										<p>{{ item.nickname || '匿名用户'}}</p>
										<p>{{ item.action }}</p>
										<p>给我</p>
									</template>
									<template v-if="item.type === 1 && item.action == '共享积分'">
										<p>我{{ item.action }}给</p>
										<image class="user" :src="item.pic_url || '/static/image/999.png'"></image>
										<p>{{ item.nickname || '匿名用户'}}</p>
									</template>

								</view>
								<span :class="item.type === 0 ? 'color': ''">
									<span :class="item.type === 0 ? 'color': ''" v-show="item.type === 0">+</span>
									<span :class="item.type === 0 ? 'color': ''" v-show="item.type === 1">-</span>
									{{ item.points_value }}
								</span>
							</view>
							<view class="item_bottom">
								<span>{{ item.create_time }}</span>
							</view>
						</view>
						<view class="getMore" style="padding: 50rpx;" v-if="list.length > 10">
							<touch-bottom :isNone="isNone" :isLoad="isLoad" :isName="isName"></touch-bottom>
						</view>
					</view>
					<!-- 积分规则 -->
					<view class="rules" v-if="active == 1">
						<view class="rule" v-for="(item,index) in rules" :key="index">
							<view class="title">{{ item.name }}</view>
							<view class="text">
								<p>{{ item.value }}</p>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 返回顶部 -->
		<backtop :show_top="show_top"></backtop>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import card from '../components/card.vue'
	export default {
		components: {
			card
		},
		data() {
			return {
				rule: /[0-9]+/g,
				// 头部卡片
				card_num: '',
				// 积分明细，积分规则
				active: 0,
				tab: [{
						id: 0,
						label: '积分明细',
					},
					{
						id: 1,
						label: '积分规则',
					},
				],
				// 积分明细
				showRefresh: false, // 是否开启下拉刷新
				currentPage: 1, // 当前页
				showCount: 10,  // 默认显示几条
				showHeight: 0,  // 显示的高度
				cardHeight: 0,  // card高度
				showList: [],   // 显示的列表
				cardbg: this.imgUrl + 'cardbg.png',
				list: [],
				obj: {
					page: 1,
					pagesize: 10,
					member_id: 1
				},
				isName: false,
				isLoad: false,
				isNone: false,
				scoreMore: [], // 加载更多流水
				top: 0,
				startY: 0, // 保存 y轴点的位置
				touching: false, // 代表当前是否处于 下拉刷新行为的开关，也就是当属于滚动行为时，就要退出该事件机制
				loadShowHeight: 0,
				scrollTop: 0,
				loadMinHeight: 0,
				refreshType: false,
				loadMsg: '',
				freshFlag: false,
				count: 0,
				hight: 0,
				show_top: false, // 回到顶部按钮显示
			};
		},
		computed: {
			...mapState({
				rules: state => state.user.pointsRule,
				user: state => state.user.user,
			})
		},
		onReachBottom() {
			this.getMorePoint();
		},
		watch: {
			// 监听滚动高度
			hight(newVal, oldVal) {
				if (newVal > 100) {
					this.show_top = true;
				} else {
					this.show_top = false;
				}
			}
		},
		methods: {
			// 当页面滚动时触发;
			onPageScroll(res) {
			    // 获取当前页面滚动高度；
				this.hight = res.scrollTop;
			},
			touchStart(e) {
				this.startY = e.touches[0].pageY;
			},
			touchMove(e) {
				if (this.scrollTop == 0) {
					let moveDistance = e.touches[0].pageY - this.startY;
					if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
						this.loadShowHeight = moveDistance;
					};
				};
			},
			touchEnd(e) {
				if (this.loadShowHeight >= 20) {
					this.refresh();
				} else {
					this.loadShowHeight = 0;
				}
			},
			refresh() {
				this.freshFlag = true;
				this.loadMsg = '刷新中...';
				setTimeout(() => {
					this.getMorePoint();
					this.loadMsg = '刷新完成';
					this.loadShowHeight = 0;
					setTimeout(()=> {
						this.freshFlag = false;
					},500)
				}, 1500);
			},
			// 加载更多
			getMorePoint() {
				if (this.isName) return;
				this.isNone = true;
				this.isLoad = true;
				setTimeout(() => {
					this.obj.page++
					this.$api('memberpointsList', this.obj).then(res => {
						res.data.data.forEach(item => {
							item.create_time = this.$tools.time_data(item.create_time, 'day')
						})
						let arr = [...this.list, ...res.data.data]
						this.list = arr
						if (!res.data.data.length) {
							this.isLoad = false;
							this.isName = true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				}, 1000)
			},
			jump(path, params) {
				this.$Router.push({
					path: path,
					params: params
				})
			},
			change_status(index) {
				this.active = index
			},
			getApi() {
				this.$api('memberpointsList', this.obj).then(res => {
					res.data.data.forEach(item => {
						item.create_time = this.$tools.time_data(item.create_time, 'day')
					})
					this.list = res.data.data
				})
			},
			// 获取任务请求
			getList() {
				this.$api('task.list').then(res=> {
					this.task = res.data
					this.$store.dispatch('task/get_task',this.task)
				})
			},
		},
		mounted() {
			this.card_num = this.user.points
		},
		onLoad() {
			this.getApi();
			this.getList()
		},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";

	.change {
		font-weight: 600;
		padding-bottom: 20rpx;
		position: relative;

		&:after {
			content: "";
			width: 32rpx;
			height: 8rpx;
			border-radius: 999px;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: #FF504C;
		}
	}

	.color {
		color: #666 !important;
	}
</style>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
